import { BaseMenu } from './BaseMenu';
import { MenuConfig } from '../MenuManager';
import { ProgressionManager, Upgrade } from '../ProgressionManager';

export class UpgradeMenu extends BaseMenu {
    private progressionManager: ProgressionManager;
    private cardWidth: number = 250;
    private cardHeight: number = 150;
    private spacing: number = 20;

    constructor(config: MenuConfig, progressionManager: ProgressionManager) {
        super(config);
        this.progressionManager = progressionManager;
    }

    public render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
        // 绘制返回按钮
        this.drawBackButton(ctx);

        // 绘制标题和当前分数
        ctx.fillStyle = this.theme.textColor;
        ctx.font = 'bold 32px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('能力升级', canvas.width / 2, 80);

        ctx.font = 'bold 24px Arial';
        ctx.fillText(`当前分数: ${this.progressionManager.getScore()}`, canvas.width / 2, 120);

        // 获取所有可用升级
        const upgrades = this.progressionManager.getUpgrades();
        const startX = (canvas.width - (this.cardWidth * Math.min(upgrades.length, 3) + 
            this.spacing * (Math.min(upgrades.length, 3) - 1))) / 2;
        const startY = 180;

        // 渲染升级卡片
        upgrades.forEach((upgrade, index) => {
            const x = startX + (this.cardWidth + this.spacing) * index;
            this.drawUpgradeCard(ctx, x, startY, upgrade);
        });
    }

    private drawUpgradeCard(ctx: CanvasRenderingContext2D, x: number, y: number, upgrade: Upgrade): void {
        // 绘制卡片背景
        ctx.fillStyle = this.theme.backgroundColor;
        ctx.strokeStyle = this.theme.borderColor;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.roundRect(x, y, this.cardWidth, this.cardHeight, 10);
        ctx.fill();
        ctx.stroke();

        // 绘制升级名称
        ctx.fillStyle = this.theme.textColor;
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(upgrade.name, x + this.cardWidth / 2, y + 30);

        // 绘制当前等级
        ctx.font = '16px Arial';
        ctx.fillText(`等级: ${upgrade.level}/${upgrade.maxLevel}`, x + this.cardWidth / 2, y + 60);

        // 绘制效果加成
        const effect = Math.pow(upgrade.effect, upgrade.level - 1);
        ctx.fillText(`效果: +${Math.round((effect - 1) * 100)}%`, x + this.cardWidth / 2, y + 85);

        // 绘制升级按钮
        const buttonWidth = 120;
        const buttonHeight = 40;
        const buttonX = x + (this.cardWidth - buttonWidth) / 2;
        const buttonY = y + this.cardHeight - buttonHeight - 10;

        const canUpgrade = upgrade.level < upgrade.maxLevel && 
                          this.progressionManager.getScore() >= upgrade.cost;

        ctx.fillStyle = canUpgrade ? '#4CAF50' : '#666666';
        ctx.beginPath();
        ctx.roundRect(buttonX, buttonY, buttonWidth, buttonHeight, 5);
        ctx.fill();

        // 绘制升级成本
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 16px Arial';
        ctx.fillText(`升级 ${upgrade.cost}分`, x + this.cardWidth / 2, buttonY + buttonHeight / 2 + 6);
    }

    public handleClick(x: number, y: number, canvas: HTMLCanvasElement): string | null {
        // 检查返回按钮点击
        if (this.isBackButtonClicked(x, y)) {
            return 'back';
        }

        // 检查升级卡片点击
        const upgrades = this.progressionManager.getUpgrades();
        const startX = (canvas.width - (this.cardWidth * Math.min(upgrades.length, 3) + 
            this.spacing * (Math.min(upgrades.length, 3) - 1))) / 2;
        const startY = 180;

        for (let i = 0; i < upgrades.length; i++) {
            const cardX = startX + (this.cardWidth + this.spacing) * i;
            const buttonWidth = 120;
            const buttonHeight = 40;
            const buttonX = cardX + (this.cardWidth - buttonWidth) / 2;
            const buttonY = startY + this.cardHeight - buttonHeight - 10;

            if (x >= buttonX && x <= buttonX + buttonWidth &&
                y >= buttonY && y <= buttonY + buttonHeight) {
                const upgrade = upgrades[i];
                if (upgrade.level < upgrade.maxLevel && 
                    this.progressionManager.getScore() >= upgrade.cost) {
                    this.progressionManager.upgradeAttribute(upgrade.id);
                    return null; // 不切换菜单，保持在当前页面
                }
            }
        }
        return null;
    }

    private drawBackButton(ctx: CanvasRenderingContext2D): void {
        const backButtonX = 50;
        const backButtonY = 50;

        ctx.fillStyle = this.theme.textColor;
        ctx.strokeStyle = this.theme.borderColor;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(backButtonX, backButtonY, 30, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        // 绘制返回箭头
        ctx.beginPath();
        ctx.moveTo(backButtonX + 10, backButtonY);
        ctx.lineTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY - 5);
        ctx.moveTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY + 5);
        ctx.strokeStyle = '#FFFFFF';
        ctx.stroke();
    }

    private isBackButtonClicked(x: number, y: number): boolean {
        const backButtonX = 50;
        const backButtonY = 50;
        return Math.sqrt(Math.pow(x - backButtonX, 2) + Math.pow(y - backButtonY, 2)) <= 30;
    }

    public update(deltaTime: number): void {
        // 升级菜单不需要更新逻辑
    }
}